<template>
  <view class="app-container">
    <image class="background" src="/static/images/background.jpg" mode="aspectFill"></image>

    <view class="bar-box" :style="{ marginTop: titleMargin + 'px' }">
      <image class="back" src="/static/images/back.png" @click="back"></image>
      <view class="title">我的关注</view>
    </view>
    <scroll-view scroll-y @scrolltolower="loadMore" class="list-box">
      <view class="box" @click="goUserDetail(item.follow_user_id)" v-for="(item, index) in list" :key="item.id">
        <view class="left">
          <image class="avatar" mode="aspectFill" :src="item.avatar ? item.avatar : '/static/images/default_avatar.png'"></image>
          <view :class="['tag', item.gender == '男' ? 'nan' : '']">寻觅</view>
        </view>
        <view class="right">
          <view class="row">
            <view class="name">
              <view class="text">{{ item.username }}</view>
              <image class="sex" v-if="item.gender == '男'" src="/static/images/sex1.png"></image>
              <image class="sex" v-else src="/static/images/sex2.png" style="width: 24rpx"></image>
            </view>
            <view class="cancel-follow" @click.stop="cancelFollow(index)">取消关注</view>
          </view>
          <view class="row">
            <view class="text">{{ item.residence }}</view>
            <view class="text">{{ item.age }}岁</view>
            <view class="text">{{ item.marital_status }}</view>
          </view>
          <view class="row" style="width: 320rpx">
            <view class="text">{{ item.height }}cm</view>
            <view class="text">{{ item.annual_income }}</view>
          </view>
          <view class="tag-box">
            <view :class="['tag', item.gender == '男' ? 'nan' : '']" v-for="val in item.hobby">{{ val }}</view>
          </view>
          <view class="row">
            <view class="yq-text">{{ item.requirement_marital_status ? item.requirement_marital_status : '' }}{{ item.requirement_age > 0 ? '，' + item.requirement_age : '' }}{{ item.requirement_height ? '，' + item.requirement_height : '' }}{{ item.requirement_annual_income ? '，' + item.requirement_annual_income : '' }}</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      titleMargin: 0, // 动态顶部间距
      list: [],
      page: 1,
      pagesize: 10
    };
  },
  created() {
    this.setDynamicMargin(); // 设置动态间距
  },

  onLoad: function () {
    var user_id = uni.getStorageSync('user_id');
    if (user_id) this.followList();
  },

  methods: {
    setDynamicMargin() {
      const windowInfo = uni.getWindowInfo();
      this.titleMargin = windowInfo.statusBarHeight + 10; // 直接使用状态栏高度
    },

    back: function () {
      uni.navigateBack();
    },

    goUserDetail: function (user_id){
      uni.navigateTo({
        url: '/pages/user_details/user_details?user_id=' + user_id
      })
    },

    cancelFollow: function (index) {
      var list = this.list,
        user_id = uni.getStorageSync('user_id'),
        follow_user_id = list[index].follow_user_id;

      uni.showModal({
        title: '操作提示',
        content: '确定要取消关注吗？',
        success: (res) => {
          if (res.confirm) {
            this.$http.post('/index/Api/cancelFollow', {
              user_id: user_id,
              follow_user_id: follow_user_id
            }).then(res => {
              if (res.data.result == 1) {
                list.splice(index, 1);
                this.list = list;

                var pages = getCurrentPages();
                var prevPage = pages[pages.length - 2];
                prevPage.$vm.info.me_follow_count = prevPage.$vm.info.me_follow_count - 1

                uni.showToast({
                  title: res.data.msg
                })
              } else {
                this.$common.doErrorResult(res);
              }
            })
          }
        }
      })
    },

    loadMore: function () {
      this.followList(this.page + 1);
    },

    followList: function (incPage = 0) {
      var page = incPage ? incPage : this.page;

      uni.showLoading({
        title: '数据加载中...',
        mask: true
      })

      this.$http.post('/index/Api/followList', {
        user_id: uni.getStorageSync('user_id'),
        type: 1,
        page: page,
        pagesize: this.pagesize
      }).then((res) => {
        if (res.data.result == 1) {
          if (page == 1) {
            this.list = res.data.data;
          } else {
            // 加载更多
            var list = this.list;

            for (var i = 0; i < res.data.data.length; i++) {
              list.push(res.data.data[i]);
            }

            this.list = list;
            this.page = page;
          }

          setTimeout(() => {
            uni.hideLoading();
          }, 500)
        } else {
          if (page == 1) this.list = [];

          uni.hideLoading();
          this.$common.doErrorResult(res);
        }
      })
    },
  },
}
</script>

<style lang="scss">
.app-container {
  display: flex;
  flex-direction: column;
  align-items: center;

  .list-box {
    width: 86%;
    height: 83vh;
    margin-top: 40rpx;

    .box {
      display: flex;
      justify-content: space-between;
      padding: 14rpx;
      background: #fff;
      border-radius: 20rpx;
      margin-top: 20rpx;

      &:first-child {
        margin-top: 0;
      }

      .left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        min-width: 120rpx;

        .avatar {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
        }

        .tag {
          width: 80rpx;
          padding: 4rpx 0;
          background: #FCC2D3;
          border-radius: 10rpx;
          font-size: 28rpx;
          text-align: center;
        }

        .nan {
          background: #1B54F3;
          color: #fff;
        }
      }

      .right {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-left: 40rpx;

        .row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 14rpx;

          .name {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 130rpx;
          }

          &:last-child {
            margin-bottom: 0;
          }

          .text {
            font-size: 28rpx;
            font-weight: bold;
          }

          .sex {
            width: 30rpx;
            height: 30rpx;
          }

          .yq-text {
            font-size: 24rpx;
          }

          .cancel-follow {
            font-size: 40rpx;
            color: #F30E0E;
          }
        }

        .tag-box {
          display: flex;
          margin-bottom: 14rpx;

          .tag {
            padding: 4rpx 10rpx;
            background: #FCC2D3;
            border-radius: 10rpx;
            font-size: 24rpx;
            margin-right: 10rpx;

            &:last-child {
              margin-right: 0;
            }
          }
          .nan {
            background: #1B54F3;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>

